"use client"

import { useEffect } from "react"
import type { Ticket } from "@/types/tickets"

const formatDate = (dateString: string | null) => {
  if (!dateString) return "____年__月__日 __时__分"
  const date = new Date(dateString)
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  })
}

const PrintCheckbox = ({
  checked,
  label,
}: {
  checked: boolean
  label: string
}) => (
  <div className="flex items-center space-x-2">
    <div
      className={`w-4 h-4 border border-black flex items-center justify-center ${
        checked ? "bg-black" : ""
      }`}
    >
      {checked && <span className="text-white text-xs">✔</span>}
    </div>
    <span>{label}</span>
  </div>
)

const SectionTitle = ({ children }: { children: React.ReactNode }) => (
  <h2 className="text-lg font-bold border-b-2 border-black pb-1 mb-2">
    {children}
  </h2>
)

interface PrintLayoutProps {
  ticket: Ticket
  printType: "before" | "after"
}

export default function PrintLayout({ ticket, printType }: PrintLayoutProps) {
  useEffect(() => {
    setTimeout(() => {
      window.print()
    }, 500)
  }, [])

  return (
    <div className="bg-white text-black p-8 font-serif">
      <style jsx global>{`
        @media print {
          @page {
            size: A4;
            margin: 20mm;
          }
          body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
          }
        }
      `}</style>

      <div className="text-center mb-6">
        <h1 className="text-2xl font-bold">丁堰车辆段检修作业安全联锁单</h1>
        <p className="text-right mt-2">编号: {ticket.id}</p>
      </div>

      <div className="grid grid-cols-4 gap-4 border-t border-b border-black py-2 text-sm">
        <div>
          <span className="font-bold">作业地点:</span> {ticket.location}
        </div>
        <div>
          <span className="font-bold">作业部门:</span> 车辆中心
        </div>
        <div>
          <span className="font-bold">作业性质:</span> {ticket.operationType}
        </div>
        <div>
          <span className="font-bold">申请时间:</span>{" "}
          {formatDate(ticket.applicationTime)}
        </div>
      </div>

      <div className="mt-4">
        <SectionTitle>作业任务</SectionTitle>
        <p className="text-sm py-2">{ticket.type}</p>
      </div>

      <div className="mt-4">
        <SectionTitle>作业条件、安全措施及注意事项</SectionTitle>
        <ul className="list-decimal list-inside text-sm space-y-1 mt-2">
          {ticket.safetyMeasures.map((measure, index) => (
            <li key={index}>{measure.item}</li>
          ))}
        </ul>
      </div>

      <div className="mt-4">
        <SectionTitle>作业步骤</SectionTitle>
        <ol className="list-decimal list-inside text-sm space-y-2 mt-2">
          {ticket.operations.map(op => (
            <li key={op.step} className="grid grid-cols-10 items-center">
              <span className="col-span-8">{op.action}</span>
              <div className="col-span-2 flex justify-end">
                <PrintCheckbox
                  checked={printType === "after"}
                  label="确认"
                />
              </div>
            </li>
          ))}
        </ol>
      </div>

      {printType === "after" && (
        <div className="mt-6 border-t-2 border-black pt-4">
          <SectionTitle>作业完成确认</SectionTitle>
          <div className="grid grid-cols-2 gap-x-8 gap-y-12 mt-8 text-sm">
            <div>
              <p className="mb-8">作业负责人(签名): ________________</p>
              <p>日期: ________________</p>
            </div>
            <div>
              <p className="mb-8">监护人(签名): ________________</p>
              <p>日期: ________________</p>
            </div>
            <div>
              <p className="mb-8">值班调度(签名): ________________</p>
              <p>日期: ________________</p>
            </div>
            <div>
              <p className="mb-8">值班主任(签名): ________________</p>
              <p>日期: ________________</p>
            </div>
          </div>
        </div>
      )}

      <div className="mt-8 pt-4 border-t border-black text-sm grid grid-cols-3 gap-4">
        <div>
          <span className="font-bold">作业负责人:</span> {ticket.operator}
        </div>
        <div>
          <span className="font-bold">监护人:</span> {ticket.supervisor}
        </div>
        <div>
          <span className="font-bold">值班调度:</span> ____________
        </div>
      </div>
    </div>
  )
} 